//创建store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//准备actions用于响应组件中的动作
const actions = {
    checkTodo(context,value){
        //通过遍历找到id对应的那组数据
        context.state.todos.forEach((todo) => {
            //如果todo的id和传进来的id是一样的，那就是找对了
            if(todo.id === value){
                todo.done = !todo.done
            }
        });
    },
    handleDelete(context,value){
        /* confirm是根据用户的交互判断是真还是假，确认就走下面的逻辑，假就不走下面的逻辑 */
        if(confirm('确定删除吗？')){
            context.commit('DELETE',value)
        }
    },
    //编辑
    handleEdit(context,value){
        if(Object.hasOwnProperty.call(value,'isEdit')){
            value.isEdit = true
        }else {
            context.commit('EDIT',value)
        }
    },
}

//准备mutations用于操作数据（state）
// mutation是唯一修改state的方法，而action是操作mutation触发commit修改state的方式
const mutations = {
    ADD_TODOS(state,value){ 
        state.todos.unshift(value)
    },
    DELETE(state,value){
        /* 都是遍历数组，用foreach应该也可以写出来，但是map会更简单,其中i表示当前索引*/
        state.todos.map((todo,i)=>{
            if(todo.id == value){
                state.todos.splice(i,1)
            }
        })
    },
    CLEARDONE(state){
        state.todos = state.todos.filter(
            //过滤掉done为false的todo
            todo=>todo.done === false
        )
    },
    EDIT(state,value){
        Vue.set(value,'isEdit',true)
    },
    SETID(state,value){
        
    }
}

//准备state用于存储数据
const state = {
    todos:JSON.parse(localStorage.getItem('todos')) || [],
    userId:''
}

//准备getters用于将state中的数据用于加工
const getters = {
    doing(state){
        return state.todos.filter(function(todoObj){
            return !todoObj.done;
        })
    },
    doingnum(state,getters){
        return getters.doing.length
    },
    done(state){
        return state.todos.filter(function(todoObj){
            return todoObj.done;
        })
    },
    donenum(state,getters){
        return getters.done.length
    },
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
});


watch:{

}